<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            width: 1000px;
            margin: 50px auto;
        }
        .seach{
            float: right;
        }
        table{
            margin: 20px auto;
        }
    </style>
</head>
<body>
    
    <div id="app">
        id: <input type="text" v-model.trim="id" @keyup="checkID">
        名字: <input type="text" v-model="name">
        数量: <input type="text" v-model.number="num">
        <button @click="add">添加</button>
        <input type="text" class="seach" v-model="findName"><hr>

        <table border="1" cellspacing="0" cellpadding="10">
            <tr>
                <th>全选: <input type="checkbox" v-model="checkAll"></th>
                <th>id</th>
                <th>名字</th>
                <th>数量</th>
                <th>时间</th>
                <th>操作</th>
            </tr>

            <tr v-for="(item,index) in filterList" :key="item.id">

                <td><input type="checkbox" v-model="item.check"></td>
                <td>{{index + 1}}</td>
                <td>{{item.name}}</td>
                <td @click="item.isChange = !item.isChange">
                    <span v-if="!item.isChange">{{item.num}}</span>
                    <input type="text" v-model.trim.number="item.num" v-else @click="$event.stopPropagation()" v-focus>
                </td>
                <td>{{item.time}}</td>
                <td><button @click="del(item)">删除</button></td>
            </tr>
        </table><hr>
        总数量:{{getAll}}
    </div>

    <script src="../lib/Vue/vue.js"></script>
    <script>

        Vue.directive('focus', {
            inserted(el) {
                el.focus()
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    {
                        id: 1,
                        name: '张三',
                        num: 10,
                        time: '2020/8/12 下午3:45:02',
                        check: false,
                        isChange: false
                    },
                    {
                        id: 2,
                        name: '李四',
                        num: 10,
                        time: '2020/8/12 下午3:45:02',
                        check: true,
                        isChange: false
                    },
                    {
                        id: 3,
                        name: '王五',
                        num: 10,
                        time: '2020/8/12 下午3:45:02',
                        check: false,
                        isChange: false
                    },
                ],
                id: '',
                name: '',
                num: null,
                findName: ''
            },
            methods: {
                // 校验id
                checkID() {
                    if (this.list.some(el => {return el.id==this.id})) {
                        alert('id不可以相同')
                    }
                },
                // 添加的事件
                add() {
                    var obj = {
                        id: this.id,
                        name: this.name,
                        num: this.num,
                        time: new Date().toLocaleString(),
                        check: false,
                        isChange: false
                    }
                    if (this.id == '' || this.name == '' || this.num == '') {
                        alert('选项不能为空')
                        return
                    }
                    this.list.push(obj);
                    this.id = this.name = this.num = ''
                },
                // 删除事件
                del(item) {
                    var index = this.list.findIndex(el => {
                        return el.id == item.id
                    })
                    this.list.splice(index, 1)
                }
            },
            computed: {
                // 总数量
                getAll() {
                    return this.list.reduce((total, val) => {
                        if (val.check) {
                            return total + val.num
                        } else {
                            return total
                        }
                    }, 0)
                },
                checkAll: {
                    get() {
                        return this.list.every(el => {
                            return el.check == true
                        })
                    },
                    set(val) {
                        this.list.forEach(el => {
                            el.check = val
                        })
                    }
                },
                // 筛选数组
                filterList() {
                    if (this.findName == '') {
                        console.log('是我');
                        return this.list
                    } else {
                        return this.list.filter(el => {
                            return el.name.includes(this.findName)
                        })
                    }
                }
            },
        })
    </script>
</body>
</html>